View {
  --color-white: '#fff';

  --color-plain: '#909399';
  --bg-plain: '#f4f4f5';
  --bd-plain: '#d3d4d6';

  --color-info: #909399;
  --bg-info: #f4f4f5;
  --bd-info: #d3d4d6;

  --color-success: #409eff;
  --bg-success: #ecf5ff;
  --bd-success: #b3d8ff;

  --color-warning: #e6a23c;
  --bg-warning: #fdf6ec;
  --bd-warning: #f5dab1;

  --color-fail:  #f56c6c;
  --bg-fail:  #fef0f0;
  --bd-fail:  #fbc4c4;
}

.is-button {
  line-height: 1;
  border: 1PX solid var(--bd-info);
}

.is-info {
  color: var(--color-info);
  background-color: var(--bg-info);
  border-color: var(--bd-info);
}

.is-success {
  color: var(--color-success);
  background-color: var(--bg-success);
  border-color: var(--bd-success);
}

.is-warning {
  color: var(--color-warning);
  background-color: var(--bg-warning);
  border-color: var(--bd-warning);
}

.is-fail {
  color: var(--color-fail);
  background-color: var(--bg-fail);
  border-color: var(--bd-fail);
}

.toast {
  position: fixed;
  z-index: 999;
  top: 20PX;
  left: 50%;
  transform: translate(-50%, 0);
  font-size: 16PX;
  padding: 12PX 20PX;
  border-radius: 4PX;
}

.toast.ani {
  animation: show 0.5s;
}

@keyframes show {
  0% { top: 0PX; opacity: 0.3; }
  25% { top: 8PX; opacity: .5; }
  50% { top: 15PX; opacity: .8; }
  75% { top: 18PX; opacity: 1; }
  100% { top: 20PX; }
}

